<template>
	<!-- 应收款详情 -->
	<el-card>
		<view class="info" style="margin-bottom: 20px;">
			<el-descriptions title="ReceiveInfo 应收款信息" :border="true">
				<el-descriptions-item label="Inventory date 入库日期">{{accountInfo.inventoryDate}}</el-descriptions-item>
				<el-descriptions-item label="Pickup Date 提货日期">{{accountInfo.pickupDate}}</el-descriptions-item>
				<el-descriptions-item label="Pickup destination 提货目的地">{{accountInfo.pickupDestination}}</el-descriptions-item>
				<el-descriptions-item label="JOB NUMBER 自编号">{{accountInfo.jobNumber}}</el-descriptions-item>
				<el-descriptions-item label="CTN NO 箱号">{{accountInfo.cntNo}}</el-descriptions-item>
				<el-descriptions-item label="System NO 收据单号">{{accountInfo.receiptNo}}</el-descriptions-item>
				<el-descriptions-item label="CLEMENT 客户">{{accountInfo.customerName}}</el-descriptions-item>

				<el-descriptions-item label="TEL 电话">{{accountInfo.customerMobile}}</el-descriptions-item>
				<el-descriptions-item label="CTNS 箱数">{{accountInfo.cnts}}</el-descriptions-item>
				<el-descriptions-item label="GROSS WEIGHT 实重">{{accountInfo.grossWeight}}</el-descriptions-item>
				<el-descriptions-item label="CHARGE WEIGHT 计费重">{{accountInfo.chargeWeight}}</el-descriptions-item>
				<el-descriptions-item label="UNIT PRICE USD 美金单价">{{accountInfo.unitPriceUsd}}</el-descriptions-item>
				<el-descriptions-item label="OTHER CHARGE 美金其他费用">{{accountInfo.otherChargeUsd}}</el-descriptions-item>
				<el-descriptions-item label="TOTAL USD 美金金额">{{accountInfo.totalUsd}}</el-descriptions-item>
				<el-descriptions-item label="UNIT PRICE 人民币单价">{{accountInfo.unitPriceRmb}}</el-descriptions-item>
				<el-descriptions-item label="OTHER CHARGE 人民币其他费用">{{accountInfo.otherChargeRmb}}</el-descriptions-item>
				<el-descriptions-item label="TOTAL RMB 人民币金额">{{accountInfo.totalRmb}}</el-descriptions-item>

				<el-descriptions-item label="NOTE 备注">{{accountInfo.note}}</el-descriptions-item>
				<el-descriptions-item label="Sales 销售">{{accountInfo.salesName}}</el-descriptions-item>
				<el-descriptions-item label="CS 客服">{{accountInfo.csName}}</el-descriptions-item>
				<el-descriptions-item label="Status 状态">
					<view v-if="accountInfo.status">
						<span v-if="accountInfo.status === 'Y'">Finished 已结清</span>
						<span v-if="accountInfo.status === 'N'">NotFinished 未结清</span>
					</view>
				</el-descriptions-item>
			</el-descriptions>
		</view>
		<h3 style="margin: 10px 0; font-size: 17px;">Receive Detail收款明细</h3>
		<detail-table v-if="customerInfo.customerId" type="accountDetail" :account-id="id" :customer-info="customerInfo"></detail-table>
	</el-card>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import { reactive, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import DetailTable from '@/views/accountDetail/detail-table.vue'
import { useReceiveApi } from '@/api/receivable'
import { useRouter } from 'vue-router'
import store from '@/store'

const router = useRouter()
const accountInfo = reactive({
	id: '',
	inventoryDate: '',
	pickupDate: '',
	pickupDestination: '',
	jobNumber: '',
	cntNo: '',
	receiptNo: '',
	customerName: '',
	customerMobile: '',
	cnts: '',
	grossWeight: '',
	chargeWeight: '',
	unitPriceUsd: '',
	totalUsd: '',
	unitPriceRmb: '',
	otherChargeRmb: '',
	note: '',
	salesName: '',
	csName: ''
})

const accountId = router.currentRoute.value.query.id;

if(accountId){
	store.commonStore?.setAccountId(accountId);
} 
const id = store.commonStore.accountId;
const customerInfo = reactive({});

// 获取应收款详情
const getReceiveInfo = (id: any) => {
	useReceiveApi(id).then(res => {
		Object.assign(accountInfo, res.data)
		let obj = {
			customerId: res.data.customerId,
			customerName: res.data.customerName
		}
		Object.assign(customerInfo, obj)
	})
}

getReceiveInfo(id);

</script>
